<template>
  <el-dialog :close-on-click-modal="false" title="不良处置" width="800px" :visible.sync="visible">
    <el-form class="detail-form" :model="form" label-suffix=":" ref="form" label-width="120px">
      <el-form-item v-show="false">
        <el-input v-model="form.badId" :disabled="true" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="不良类型">
            <span>{{ judgeType(detailObj.badType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发生日期">
            <span>{{ detailObj.badDate }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="供应商">
        <span>{{ detailObj.supplierName }}</span>
      </el-form-item>
      <el-form-item label="对应联系人列表">
        <span>{{ handleData(detailObj.linkmanList) }}</span>
      </el-form-item>

      <el-form-item label="事件描述">
        <span>{{ detailObj.badContent }}</span>
      </el-form-item>
      <el-divider />
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="创建人">
            <span>{{ detailObj.createUser }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <span>{{ formatTime(detailObj.createTime) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="处置结果"
        prop="radioValue"
        :rules="form.radioValue ? (form.radioValue === 2 && !selectValue ? rules.handleState2 : rules.handleState1) : rules.handleState1"
      >
        <el-radio-group v-model="form.radioValue">
          <el-radio :label="0">暂停采购</el-radio>
          <el-radio :label="1">纳入企业黑名单</el-radio>
          <el-radio :label="2" style="margin-right:16px">其他</el-radio>
          <el-select
            v-show="form.radioValue === 2"
            v-model="selectValue"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in handleStateArr"
              :value="item.value"
              :key="item.value"
              :label="item.title"
            />
          </el-select>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="处置说明">
        <el-input
          v-model="form.handleContent"
          type="textarea"
          placeholder="请输入处置说明"
          :autosize="{ minRows: 3, maxRows: 6 }"
        />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="处置人">
            <span>{{ detailObj.handleUser ? detailObj.handleUser : userInfo.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处置时间">
            <span>{{ detailObj.handleTime ? formatTime(detailObj.handleTime) : null }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="tl-center">
      <el-button size="large" class="mr20" @click="handleReset">重置</el-button>
      <el-button size="large" type="primary" :loading="confirmLoading" @click="handleSure">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { badDetail, handleBadRecord } from '@/api/supplier'
import { openNotification, getDicData } from '@/utils/util'
import pick from 'lodash.pick'

export default {
  data() {
    return {
      visible: false,
      form: {
        radioValue: null,
        handleContent: null
      },
      rules: {
        handleState1: [{ required: true, message: '请选择一个处置结果', trigger: 'blur' }],
        handleState2: [{ message: '请从其他项内选择一个处置结果', trigger: 'blur' }]
      },
      confirmLoading: false,
      mdl: {},
      detailObj: {},
      selectValue: null,
      handleStateArr: [], // 处置状态数组
      badTypeArr: [],
      userInfo: this.$ls.get('userInfo')
    }
  },
  mounted() {
    this.handleStateArr = getDicData('002', '002007')
    this.badTypeArr = getDicData('002', '002006')
  },
  methods: {
    judgeType(key) {
      let str = ''
      this.badTypeArr.map(v => {
        if (v.key === key) {
          str = v.title
        }
      })
      return str
    },
    // radioChange(e) {
    //   console.log('e', e)
    //   this.$set(this.form, 'handleState', e)
    // },
    async edit(record) {
      console.log('record', record, this.userInfo)

      const res = await badDetail(record.badId, {})
      this.detailObj = res.data
      if (record.handleState) {
        if (this.handleState === '0' || this.handleState === '1') {
          this.form.radioValue = record.handleState
        } else {
          this.form.radioValue = '2'
          this.selectValue = record.handleState
        }
      }
      this.$nextTick(() => {
        // this.form.setFieldsValue({ handleState: this.radioValue })
        this.form = pick(this.detailObj, 'badId', 'handleContent')
      })
      this.visible = true
    },
    // 打印事件处理
    handleReset() {
      console.log('打印')
    },
    // 确定事件
    handleSure() {
      this.confirmLoading = true
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { badId, handleContent, radioValue } = this.form
          let val = { badId, handleContent }
          let param = {}
          let res = ''
          if (radioValue === 0) {
            param = { ...val, stopFlag: 1, handleState: 1 }
            res = await handleBadRecord([param])
          }
          if (radioValue === 1) {
            param = { ...val, blacklistFlag: 1, handleState: 2 }
            res = await handleBadRecord([param])
          }
          if (radioValue === 2) {
            param = { ...val, handleState: this.selectValue }
            res = await handleBadRecord([param])
          }
          if (res.state === '000000') {
            this.visible = false
            openNotification('success', '处置成功')
            this.$emit('refresh')
          }
        }
        this.confirmLoading = false
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 处理联系人列表的JSON数据
    handleData(str) {
      if (!!str) {
        const arr = JSON.parse(str)
        let arr1 = []
        arr.map(v => {
          arr1.push(v.linkmanName)
        })
        return arr1.join('、')
      }
    }
  }
}
</script>

<style scoped>
.detail-form >>> .ant-form-item {
  margin-bottom: 10px;
}
.detail-form >>> .width-item .ant-form-item-label {
  width: 177px;
}
.detail-form >>> .width-item .ant-form-item-control-wrapper {
  width: 200px;
}
</style>
